<template>
<!--vip-->
  <div>
    <headers></headers>
    <div class="padding88">
      <div class="banner">
        <p><Button shape="circle" ghost>开通VIP会员</Button></p>
      </div>
    </div>
    <div class="vip ">
      <div class=" auto">
        <p>勤博VIP特权</p>
        <img src="../../assets/vip2.png" alt="">
      </div>
    </div>
    <div class="cata auto ">
      <p class="title">VIP会员</p>
      <ul>
        <li :class="{on:nowIndex === index}" v-for="(vip,index) in vips" @click.stop.prevent="choseVip(index,vip.id)">
          <p>{{vip.priceName}}</p>
          <p>￥<span>{{vip.androidPrice}}</span></p>
        </li>
      </ul>
      <div class="other">
        <p class="btn"><Button shape="circle" @click.prevent.stop="buyVip">立即开通</Button></p>
        <Checkbox v-model="agree" @click="agreement">升级代表您同意勤博教育</Checkbox><router-link :to="{path:'/html',query:{type:'personageVIP',html:''}}" target='_blank'>《会员服务协议》</router-link>
      </div>
    </div>
    <div class="bottom">
      <div class="auto">
        <Button shape="circle" ghost>企业购买VIP</Button>
        <p><img src="../../assets/tell1.png" alt="">咨询电话：0755-28288261</p>
      </div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
    <loginmodal  ref="loginV"></loginmodal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .banner{
    height: 438px;
    background: url("../../assets/vip1.png") no-repeat;
    position: relative;
    background-size: 100% 100%;
    p{
      text-align: right;
      position: absolute;
      bottom: 75px;
      right: 35%;
      button{
       width: 233px;
        height: 52px;
        font-size: 22px;
      }
    }

  }
  .vip{
    background-color: #fff;
    font-size: 26px;
    color: #000;
    padding: 40px 0;
    p{
      margin-bottom: 40px;
    }
  }
  .cata{
    position: relative;
    z-index: 2;
    margin-top: 25px;
    padding: 30px 30px 40px ;
    background-color: #fff;
    .title{
      font-size: 26px;
      color: #000;
      padding-left: 25px;
      text-align: left;
      position: relative;
      margin-bottom: 30px;
    }
    .title:before{
      display: block;
      content:'';
      position: absolute;
      left: 0;
      top:6px;
      width: 9px;
      height: 28px;
      background-color: #9C7649;
    }
    text-align: left;
    li{
      display: inline-block;
      width: 172px;
      height: 132px;
      border:1px solid #ccc;
      text-align: center;
      padding-top: 20px;
      margin-right: 35px;
      cursor: pointer;
      p:first-child{
        font-size: 22px;
        color: #222;
        margin-bottom: 10px;
      }
      p:last-child{
        color: #FF3300;
        font-size: 20px;
        span{
          font-size: 32px;
        }
      }
    }
    .on{
      border:2px solid #9C7649;
      background-color: #FEFCF5;
    }
    .other{
      text-align: center;
      padding-top: 60px;
      button{
        width: 435px;
        height: 62px;
        background-color: #9C7649;
        color: #fff;
        font-size: 22px;
        margin-bottom: 40px;
      }
      a{
        color: #9C7649;
        font-size: 14px;
      }
    }

  }
  .bottom{
    position: relative;
    top: -100px;
    padding: 150px 0 300px;
    height: 396px;
    background: url("../../assets/vipbg2.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-size: 24px;
    img{
      vertical-align: middle;
      margin-right: 15px;
    }
    button{
      height: 55px;
      width: 247px;
      font-size: 21px;
      color: #9C7649;
      margin-bottom: 30px;
      border:2px solid  #9C7649;
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import loginmodal from '../template/loginmodal'
  import {vipPage,centreInfoWeb,mine,addOrder} from '../../http'
    export default {
        name: 'vip',
        props: {},
        data() {
            return {
              isSpinShow:false,
              agree:true,
              nowIndex:0,
              vips:'',
              targetId: ''
            };
        },
        methods: {
          choseVip(index,id){
            this.nowIndex = index;
            this.targetId = id;
          },
          agreement(){
            this.agree = !this.agree;
          },
          buyVip(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //同意协议
                  if (this.agree) {
                    mine().then(res => {
                      if (res.data.isVip === 1 && res.data.vipCode === 'company') {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "VIP会员提醒",
                          desc: "你已经是企业VIP会员暂时不能购买!",
                          duration: 3,
                        });
                      } else {
                        addOrder({type: 'OT_VIP', applyType: 3, targetId: this.targetId}).then(res => {
                          this.isSpinShow = false;
                          if (res.code === 200) {
                            //订单创建成功，跳转支付页面
                            this.$router.push({
                              name: 'buy',
                              query: {
                                orderId: res.data.orderId
                              }
                            })
                          } else {
                            this.$Notice.warning({
                              title: "VIP会员提醒",
                              desc: res.info,
                              duration: 3,
                            });
                          }
                        }).catch()
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    if (!this.agree) {
                      this.$Notice.warning({
                        title: "VIP会员提醒",
                        desc: "请同意使用协议",
                        duration: 3,
                      });
                    }
                  }
                } else {
                  this.isSpinShow = false;
                  this.$refs.loginV.showModal();
                }
              }).catch()
            }
          },
          getVip(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              vipPage().then(res => {
                if(res.code === 200) {
                  this.isSpinShow = false;
                  this.vips = res.data.list;
                  this.targetId = res.data.list[0].id;
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "VIP会员提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            }
          }
        },
        created() {
          this.getVip()
        },
        components: {
          headers,
          footers,
          carousel,
          loginmodal
        }
    }
</script>
